<?php
	$size['w'] = 1000;
	$size['h'] = 500;
?><!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Blocks</title>
	<script type="text/javascript" src="jquery.js"></script><!--JQuery 1.11.1-->
	<script type="text/javascript" src="blocks.js"></script>
	<script type="text/javascript" src="init.js"></script>
	<style type="text/css">
		* {
			font-family: "Calibri";
		}

		.header, .footer {
			width: 800px;
			height: 100px;
			position: absolute;
		}

		.header {
			top: 0;
		}

		.footer {
			bottom: 0;
		}

		.main {
			height: <?=$size['h']?>px;
			width: <?=$size['w']?>px;
			outline: black solid 1px;/*debug*/
			margin-top: -<?=$size['h']/2?>px;
			margin-left: -<?=$size['w']/2?>px;
			position: absolute;
			top: 50%;
			left: 50%;
		}

		#block-container {
			height: 100%;
			width: 80%;
			outline: red solid 1px;/*debug*/
		}

		.toFix {
			clear: both;
		}

		#control {
			overflow: hidden;
		}

		#control p.tools {
			width: 100px;
			text-align: center;
		}

		#control p.tools a {
			display: block;
			padding: 25px 50px;
			background: grey;
			font-weight: bold;
			font-size: 14px;
			position: absolute;
		}


		p { font-size: 14px; color: grey; }

	</style>
</head>
<body>
	<div class="header">
		<h1>Blocks</h1>
		<p>Интерактивное приложение для создания блоков на сайте</p>
	</div>
	<div class="main">
		<div id="block-container" class="toFloat">
			
		</div>
		<div id="control">
			<p class="tools"><a href="#" id="add">add</a></p>
		</div>
		<div class="toFix"></div>
	</div>
	<div class="footer">
		<p>&copy; MOE 2014</p>
	</div>
	
</body>
</html>